<template>
  <div class="info-block" :style="customStyle">
    <div class="heading">
      <div class="title">{{ title }}</div>
      <div class="desc">
        {{ desc }}
        <van-icon name="arrow" color="#999999" size="15" :style="{ marginLeft: '4px' }" />
      </div>
    </div>

    <div class="content">
      <component
        v-for="item in array"
        :key="item.id"
        :is="mode"
        :border="border"
        :title="item.title"
        :desc="item.type"
        :cover="item.cover"
        :read="item.read"
        :author="item.author"
        :time="item.time"
        :tags="item.tags"
        :content="item.content"
        :avatar="item.avatar"
        :price="item.price"
        :address="item.address"
      />
    </div>
  </div>
</template>

<script>
import RowImage from './RowImage'
import RowText from './RowText'
import RowTalk from './RowTalk'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },

    desc: {
      type: String,
      default: ''
    },

    mode: {
      type: String,
      required: true,
      validator: e => ['row-image', 'row-talk', 'row-text'].includes(e)
    },

    border: {
      type: Boolean,
      default: true
    },

    customStyle: {
      type: Object,
      default: () => ({})
    }
  },

  components: {
    RowImage,
    RowText,
    RowTalk
  },

  data() {
    return {
      array: [
        {
          id: 0,
          cover: '',
          title: '央行再次降息，来看看利好那些行业？',
          content:
            '有20%的人选择了留学，有70%的人选择了继续国内深造有20%的人选择了留学，有70%的人选择了继',
          author: '海豚交易',
          avatar: '',
          time: '04-15 15:06',
          read: '3.8',
          area: '',
          desc: '',
          tags: ['特点标签', '标签'],
          price: '15-20万/年',
          address: '上海 - 虹口区',
          type: '民营 | 本科 | 1-2年'
        },
        {
          id: 1,
          cover: '',
          title: '央行再次降息，来看看利好那些行业？',
          content:
            '有20%的人选择了留学，有70%的人选择了继续国内深造有20%的人选择了留学，有70%的人选择了继',
          author: '海豚交易',
          avatar: '',
          time: '04-15 15:06',
          read: '3.8',
          area: '',
          desc: '',
          tags: [],
          price: '15-20万/年',
          address: '上海 - 虹口区',
          type: '民营 | 本科 | 1-2年'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.info-block {
  background-color: #ffffff;

  .heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 17.5px;

    .title {
      font-size: 16px;
      color: #222222;
      font-weight: 500;
    }

    .desc {
      color: #999999;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
  }
}
</style>